<template>
  <!--
    form 数据

    formLabel 数据标签  = [{
    model: 模型数据 form[item.model],
    label: 标签名,
    labelOFF: label 标签显示开关 默认:开
    options:[{value:'值',label:'标签'}]
    }]

    默认 type input输入框
    type = select  select下拉框
    type = switch  switch按钮

    下拉框 内部数据 options:[value:'值',label:'标签']

    表单配置
    :inline="true"  表示 行内表单
    label-width="80px"  表单的宽度
    根据杰哥代码习惯写的
                                                                      ----------david
-->

  <div style="padding:30px">
    <el-card>
      <div style="width:100%;height:100%;position: relative;">
        <span style="position:absolute;top: 10%;">{{form.title}}</span>

        <div class="body"
             style="padding-top:100px;padding-left:150px">
          <el-form ref="form"
                   :model="form"
                   size="small">
            <el-form-item :label="item.label+' :'"
                          v-for="item in formLabel"
                          :key="item.model">
              <!-- 输入框 -->
              <div v-if="item.type ==='input'">
                <el-input v-model.trim="form[item.model]"
                          :placeholder="'请输入' + item.label"
                          :style="'width:'+item.width + ';' || '100%;' "
                          :class="item.class"
                          @blur="blurInput(form[item.model])">
                </el-input>

              </div>
              <!-- 入住时间 -->
              <div v-if="item.type ==='check_in_time'">
                <el-input v-model.trim="form[item.model]"
                          placeholder="例：下午14:00 至 晚上21：00可入住 "
                          :style="'width:'+item.width + ';' || '100%;' "
                          :class="item.class"
                          @blur="blurInput(form[item.model])">
                </el-input>

              </div>
              <!-- 输入框下面有提示 -->
              <div v-if="item.type ==='inputClues'">
                <el-input v-model.trim="form[item.model]"
                          :placeholder="'请输入' + item.label"
                          :style="'width:'+item.width2 + ';' || '100%;' "
                          :class="item.class"
                          @blur="blurInput(form[item.model])">
                </el-input>
                <div slot="tip"
                     class="tooltip el-upload__tip">
                  {{item.clues}}
                </div>
              </div>
              <!-- textarea输入框 -->
              <el-input type="textarea"
                        v-model.trim="form[item.model]"
                        rows="3"
                        :style="'width:'+item.width"
                        :placeholder="'请输入' + item.label"
                        v-if="item.type ==='textarea'"
                        @blur="blurInput(form[item.model])">
              </el-input>
              <!-- 酒店绑定人员 -->
              <div v-if="item.type === 'bind' ">
                <span>观视界~陈吉幸</span>
                <span style="margin-left:50px">
                  <el-button type="text">解绑</el-button>
                </span>
              </div>
              <!-- 二维码 -->
              <div v-if="item.QRcode==='QRcode'">
                <div style="background:black;width:96px;height: 96px;"></div>
                <div slot="tip"
                     style="color:#999999;font-size: 12px;">
                  {{item.clues}}
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>

      </div>
    </el-card>
  </div>

</template>

<script>
export default {
  props: {
    formLabel: Array,
    form: Object

  },
  data () {
    return {

    }
  },
  methods: {
    blurInput (val) {
      this.$emit('blurInput', val)
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .body {
  .el-upload__tip {
    font-size: 12px;
    color: #999999;
    margin-left: 80px;
  }
}
</style>